<template>
  <div id="more">
    <ul>
        <li v-for="(v,index) in list" :key="index" @click="dians(index)">
            <div class="smallbox">
                <img :src="v.src" alt="">
                <div class="one">{{v.title}}</div>
                <div class="two">{{v.content}}</div>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/NewsMore",
            method:"GET"
        }).then(res=>{
            this.list=res.data;
        })
    },
    methods:{
        dians(index){
            if(index == 0){
                this.$router.push("/actionnews");
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
    ul{
        margin-top: .625rem;
    }
    li{
        list-style: none;
        height: 5.125rem;
    }
    .smallbox{
        width: 21.25rem;
        height: 3.75rem;
        /* background-color: pink; */
        margin: 0 auto;
    }
    img{
        height: 90%;
        float: left;
    }
    .one{
        float: left;
        width: 11.25rem;
        height: 1.25rem;
        margin-left: .9375rem;
    }
    .two{
        float: left;
        /* width: 9.375rem; */
        height: 1.25rem;
        margin-top: .625rem;
        font-size: .875rem;
        color: gray;
        margin-left: .9375rem;
    }
</style>